import React, { Component } from 'react';
import { Row, Col, Button } from 'antd';
import http from '../../api/http';
import './GoodsPayDetails.css'
//css样式在home.css

class GoodsPayDetails extends Component {
    constructor(props) {
        super(props)
        this.state = {
            item: {}
        }
    }
    toPayGoodsOrderDetails = () => {
        this.props.history.push({ pathname: '/index/goods_paydetails/history' })
    }
    componentWillMount() {
        http(`/admin/order_detail/${this.props.match.params.id}`, { method: 'get', data: {} }).then(res => {
            console.log(res)
            this.setState({
                item: res.data
            })
        }).catch(res => {
            console.log(res)
        })
    }
    goBackTb = () => {
        this.props.history.goBack()
    }
    render() {
        // 在父 route 中，被匹配的子 route 变成 props
        return (
            <Row>
                <Col span={24} className="gdsdtl-hd">
                    {/* <Search placeholder='搜索：订单号' title={this.state.inp_ziduan} className="table-list-search" onSearch={this.searchTb} enterButton />
                    <Button className="gdsdtl-hd-hst" type="primary" shape="round" onClick={this.toPayGoodsOrderDetails}>
                        历史订单
                    </Button> */}
                </Col>
                <Col span={24} className="table-list-fenline"></Col>
                <Col span={24} className="gdsdtl-body">
                    <table className='gdsdtl-tb'>
                        <thead>
                            <tr>
                                <th colSpan="3">订单信息</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>订单号：{this.state.item.internal_order_sn}</td>
                                <td>收货人电话：{this.state.item.mobile}</td>
                                <td>收货人地址：{this.state.item.full_address}</td>
                            </tr>
                            <tr>
                                <td>下单日期：{this.state.item.created_at}</td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </Col>
                <Col span={24} className="gdsdtl-body">
                    <table className='gdsdtl-tb'>
                        <thead>
                            <tr>
                                <th>商品图片</th>
                                <th>商品名称</th>
                                <th>商品单价</th>
                                <th>商品数量</th>
                                <th>商品总价</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.state.item.detail && this.state.item.detail.map((item) => {
                                    return (
                                        <tr>
                                            <td><img style={{ width: '80px', height: '80px' }} src={item.spu.image} alt="" /></td>
                                            <td>{item.spu_name}</td>
                                            <td>{item.original_price + '￥'}</td>
                                            <td>{item.number}</td>
                                            <td>{item.total_price + '￥'}</td>
                                        </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                </Col>
                <Col span={24} className="gdsdtl-btn">
                    <Button type="primary" size='large' onClick={this.goBackTb}>
                        返回
                        </Button>
                </Col>
            </Row>
        )
    }
}

export default GoodsPayDetails;
